"use strict";
import * as React from 'react';
import MyText from "./MyText";
import { badgeStyles } from "../assets/styles/badge";
import { autoSize, commonStyles } from "../assets/styles/common";
const { View, TouchableOpacity } = require('react-native');
const { connect } = require('react-redux');
class MyBadge extends React.Component {
    constructor() {
        super(...arguments);
        this.renderBadge = () => {
            let number = '';
            if (this.props.number <= 0) {
                return null;
            }
            else if (this.props.number >= this.props.overflowCount) {
                number = `+${this.props.overflowCount}`;
            }
            else {
                number = `${this.props.number}`;
            }
            let width = autoSize(17), right = autoSize(-6);
            if (number.length == 1) {
            }
            else if (number.length == 2) {
                width = autoSize(20);
                right = autoSize(-10);
            }
            else {
                width = autoSize(28);
                right = autoSize(-10);
            }
            return (<View style={badgeStyles.container}>
                <View style={[badgeStyles.badge, commonStyles.centerVH, { width, right }]}>
                    <MyText style={badgeStyles.badgeText} numberOfLines={1}>{number}</MyText>
                </View>
            </View>);
        };
    }
    render() {
        return (<View style={{ position: 'relative' }}>
                {this.props.children}
                {this.renderBadge()}
            </View>);
    }
}
MyBadge.defaultProps = {
    overflowCount: 99,
    number: 0
};
export default MyBadge;
